<template>
  <!-- 记录卡片 -->
	 <view class="result">
  <scroll-view
    :scroll-y="true"
    class="scroll-view"
    @scrolltolower="onReachBottom"
  >
    <i-card
      padding="24rpx"
      :width="0"
      top="24rpx"
      v-for="item in withdrawLog"
      :key="item.id"
    >
      <view class="head">
        <view class="title">提现至：{{ item.userCardDto.cardTypeStr }}</view>
        <view class="num">{{ item.amount }}<text>元</text></view>
      </view>
      <view class="time-box">
        <view class="item-title">申请状态</view>
        <view class="time" :style="{ color: stausMap[item.status] }">{{
          item.statusDesc
        }}</view>
      </view>
      <view class="time-box item">
        <text class="item-title">姓名</text>
        <view class="time">{{
          item.userCardDto && item.userCardDto.realName
        }}</view>
      </view>
      <view class="time-box item u-flex u-col-center u-row-between">
        <text class="item-title">卡号</text>
        <view class="time u-ellipsis-1">{{
          item.userCardDto.bankcardNum || item.userCardDto.alipayPaymentAccount
        }}</view>
      </view>
      <view class="time-box item u-flex u-col-center u-row-between">
        <text class="item-title">提现单号</text>
        <view class="time">{{ item.id }}</view>
      </view>
      <view class="time-box item u-flex u-col-center u-row-between">
        <text class="item-title">提现类型</text>
        <view class="time" style="color: #ff9400">{{
          withdrawTypeMap[item.cashType]
        }}</view>
      </view>
      <view class="time-box item u-flex u-col-center u-row-between">
        <text class="item-title">公益金额</text>
        <view class="time">{{ item.foundationAmount }} 元</view>
      </view>
      <view class="time-box item u-flex u-col-center u-row-between">
        <text class="item-title">手续费</text>
        <view class="time">{{ item.serviceAmount }} 元</view>
      </view>
      <view class="time-box item u-flex u-col-center u-row-between">
        <text class="item-title">到账</text>
        <view class="time">{{ item.settleAmount }} 元</view>
      </view>
      <view class="time-box item u-flex u-col-center u-row-between">
        <text class="item-title">申请时间</text>

        <view class="time">{{ item.createTime }}</view>
      </view>
    </i-card>
    <!-- 更多 -->
    <i-more v-if="!isEmpty" :status="loadStatus" />
    <!-- 空置页 -->
    <i-notData v-if="isEmpty"></i-notData>
  </scroll-view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { getApiCashOrderList } from "../../api/index";
// 数据定义
const withdrawLog = ref<any[]>([]);
const loadStatus = ref<"loadmore" | "loading" | "nomore">("loadmore");
const currentPage = ref(1);
const isEmpty = ref(false);

const withdrawTypeMap = {
  0: "佣金金额",
  1: "充电收益",
  2: "经销商销售收益",
  3: "渠道收益",
};

const formData = reactive({
  total: 0,
  ypageNum: 1,
  ypageSize: 10,
});

const exchangeTypeList = [
  { value: 0, label: "佣金金额" },
  { value: 1, label: "充电收益" },
  { value: 2, label: "经销商销售收益" },
  { value: 7, label: "渠道收益" },
];

const stausMap = {
  0: "#999",
  1: "#EFAF41",
  "10000001": "#5C5CFF",
  "-1": "#ED5B56",
};

// 获取划转类型
const exchangeType = (item: any) => {
  const type = exchangeTypeList.find((i) => i.value === item.exchangeType);
  return type ? type.label : "-";
};

// 获取划转记录
const getLog = async () => {
  loadStatus.value = "loading";
  const res = await getApiCashOrderList({
    ypageNum: formData.ypageNum,
    ypageSize: formData.ypageSize,
  });
  if (res.code === 200) {
    withdrawLog.value = withdrawLog.value.concat(res.rows);
    isEmpty.value = !withdrawLog.value.length;
    formData.total = res.total;
    loadStatus.value =
      withdrawLog.value.length < formData.total ? "loadmore" : "nomore";
  }
};

// 触底加载更多
const onReachBottom = () => {
	console.log("触底加载更多");
  if (withdrawLog.value.length < formData.total) {
    formData.ypageNum += 1;
    getLog();
  }
};

// 初始化加载
onLoad(() => {
  getLog();
});
</script>

<style lang="scss" scoped>
.result{
  padding: 0 24rpx;
	width: 100%;
	height: calc(100vh - 88rpx);
	overflow: hidden;
  box-sizing: border-box;
}
.scroll-view {
	width: 100%;
	height: 100%
}

.head {
  @include flexRS;
  margin-bottom: 8rpx;

  .title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
  }
  .num {
    font-size: 28rpx;
    font-weight: 500;
    color: #000;
    text {
      color: #999;
      font-size: 20rpx;
      margin-left: 4rpx;
    }
  }
}
.time-box {
  @include flexRS;
  margin-top: 12rpx;

  .item-title {
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
  }
  .time {
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
    text {
      font-family: DIN Alternate, DIN Alternate;
      font-weight: bold;
      font-size: 36rpx;
      color: #222222;
    }
  }
}
</style>
